<template>
  <div>
    <!-- 搜索区域 -->
    <div class="header_search_part">
      <el-form :model="formData" label-width="100px">
        <el-row type="flex" align="middle">
          <!-- <el-col :span="6">
            <el-form-item label="报告类型：">
              <el-select v-model="formData.reportType" size="mini" style="width: 90%"></el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="报告名称：">
              <el-input v-model="formData.exportName" size="mini" style="width: 90%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button icon="el-icon-search" size="mini" @click="handleSearch"></el-button>
            <!-- <el-button size="mini" type="primary" @click="handleDelete">删除</el-button> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格区域 -->
    <div class="table_part">
      <el-table
        :data="tableDataData"
        stripe
        :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="#" type="index" width="50" align="center"> </el-table-column>
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column label="名称" align="center" prop="exportName"> </el-table-column>
        <el-table-column label="导出人" align="center" prop="exportUserName"></el-table-column>
        <el-table-column label="导出时间" align="center" prop="exportTime"></el-table-column>
        <el-table-column label="导出文件" align="center" prop="fileName">
          <template v-slot="{ row }">
            <span style="cursor: pointer; color: #007bff" @click="handleDownloadFile(row)">
              {{ row.fileName }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="计划时间" align="center" prop=""></el-table-column> -->
        <el-table-column label="报告状态" align="center" prop="reportState">
          <template v-slot="{ row }">
            {{ reportStateEnums[row.reportState] }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="报告日志" align="center" prop="logfilename"></el-table-column> -->
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 12px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParams.pageNo"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParams.total"
        ></el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import { handleExportResponse } from '@/utils/index'
import { mapActions } from 'vuex'
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    pageParams: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      formData: {
        reportType: '',
        exportName: '',
      },
      tableDataData: [],
      reportStateEnums: {
        0: '生成中',
        1: '生成成功',
        2: '生成失败',
        3: '已删除',
      },
    }
  },
  watch: {
    tableData: {
      handler(newV, oldV) {
        this.tableDataData = newV
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    ...mapActions('reportManagement', ['downloadHistoryAPI']),
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    handleSearch() {
      this.$emit('handleSearch', this.formData)
    },
    handleDelete() {
      this.$emit('handleDelete')
    },
    // 下载文件
    async handleDownloadFile(row) {
      const params = {
        fileId: row.fileId,
      }
      const res = await this.downloadHistoryAPI({ params })

      handleExportResponse(res.data, row.fileName)
    },
    // 选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
  },
}
</script>

<style lang="scss" scoped>
.header_search_part {
  margin-top: 12px;
  ::v-deep .el-form-item {
    margin: 0;
  }
}
.table_part {
  margin-top: 12px;
  background-color: $white;
}
</style>
